<template>
  <aside class="main-sidebar">
    <section class="sidebar">
      <div action="#" method="get" class="sidebar-form">
        <div class="input-group">
          <input type="text" name="q" class="form-control" placeholder="Search...">
          <span class="input-group-btn">
            <button class="btn btn-flat"><i class="fa fa-search"></i></button>
          </span>
        </div>
      </div>
      <div class="user-panel">
        <div class="pull-left image">
          <img src="http://img4.duitang.com/uploads/item/201402/22/20140222113302_fCUyc.thumb.700_0.jpeg" class="img-circle" alt="User Image">
        </div>
        <div class="pull-left info">
          <p>张之鉴</p>
          <router-link to=""><i class="fa fa-circle text-success"></i> 经理</router-link>
        </div>
      </div>
    </section>
    <ul class="sidebar-menu" data-widget="tree" v-if="menuList.length">
      <menu-list v-for="item of menuList" :menuList="item" :key="item.key"></menu-list>
    </ul>
  </aside>
</template>

<script>
import axios from '@/axios'
import MenuList from './menu'
export default {
  name: 'indexAside',
  data () {
    return {
      menuList: []
    }
  },
  components: {MenuList},
  methods: {
    getMenuConfig () {
      axios.get({
        url: '/api/menuConfig.json'
      }).then(res => {
        this.menuList = res.data
      })
    }
  },
  mounted () {
    this.getMenuConfig()
  }
}
</script>

<style lang="less" scoped>
  .main-sidebar {
    bottom: 0;
    padding-bottom: 50px;
    overflow-y: auto;
    color: #fff;
  }
</style>
